import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { useSize } from 'ahooks';
// @ts-ignore
import { getCssVariableValue } from '@/utils/utils';
import { useThemeChange } from '@/hooks/useThemeChange';
import { sortObj } from '../../helper';

const Charts: React.FC<IChartsProps> = (props) => {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstanceRef = useRef<echarts.ECharts | null>(null);
  const chartSize = useSize(chartRef);
  const { theme } = useThemeChange();

  useEffect(() => {
    if (chartRef.current) {
      chartInstanceRef.current = echarts.init(chartRef.current);
    }

    return () => {
      chartInstanceRef.current?.dispose();
    };
  }, []);

  useEffect(() => {
    if (!chartSize?.width) return;
    chartInstanceRef.current?.resize();
  }, [chartSize]);

  useEffect(() => {
    if (chartInstanceRef.current) {
      let series: echarts.EChartsOption['series'] = [];
      let legendData = [];
      if (props.chartsDataObj) {
        const entries = sortObj(props.chartsDataObj);
        for (const [key, value] of entries) {
          legendData.push(key);
          series.push({
            name: key,
            data: [...(value as any)],
            type: 'line',
            symbol: 'none',
          });
        }
      } else {
        series = [];
        legendData = [];
      }

      const option: echarts.EChartsOption | any = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#161A1D', // 设置背景颜色为黑色
          textStyle: {
            fontSize: 14,
            lineHeight: 14,
            color: '#A7A8A9',
          },
          borderWidth: 0,
          axisPointer: {
            type: 'line',
            lineStyle: { width: 1, color: '#4E5154', type: 'solid' },
          },
        },
        xAxis: {
          type: 'category',
          data: props.xAxisData,
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
              type: 'solid',
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLabel: {
            textStyle: {
              color: (value: string) => {
                return props.chartsIsMaintained?.indexOf(value) > -1
                  ? getCssVariableValue('--font-primary')
                  : getCssVariableValue('--chart-font-color');
              },
            },
            fontSize: 12,
            interval: 0,
            rotate: 45,
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            alignWithLabel: true,
            length: 4,
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: getCssVariableValue('--chart-y-line'),
            },
          },
        },
        legend: {
          data: legendData,
          bottom: 0, // 放置在底部
          left: 'center', // 水平居中
          textStyle: {
            color: getCssVariableValue('--chart-legend-color'),
          },
          icon: 'circle',
          type: 'scroll', // 可选，支持滚动的图例
          itemHeight: 10, //圆点大小
          itemWidth: 10, // 线的长度
          pageIconColor: getCssVariableValue('--bd-primary'),
          pageTextStyle: {
            color: getCssVariableValue('--chart-legend-color'),
          },
        },
        series: series,
      };

      chartInstanceRef.current.setOption(option, true);
    }
  }, [props.xAxisData, props.chartsDataObj, props.chartsIsMaintained, theme]);

  return <div ref={chartRef} style={{ height: '97%', width: '100%' }} />;
};

interface IChartsProps {
  xAxisData: any[];
  chartsDataObj?: Record<string, any>;
  chartsIsMaintained: string[];
}

export default Charts;
